/* INTRO OVERLAY */
#magic-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  justify-content: center;
  align-items: center;

  background:
    radial-gradient(circle at center,
      #12245a 0%,
      #061433 40%,
      #02030a 100%);
  filter: saturate(1.2) contrast(1.1);
  overflow: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}

#magic-intro.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* SVG */
#magic-intro svg {
  width: 460px;
  height: 460px;
  overflow: visible;
}

/* DRAW EFFECT */
.draw {
  fill: none;
  stroke: url(#neon-magic);
  stroke-width: 0.2;
  filter:
    drop-shadow(0 0 6px #6cf3ff)
    drop-shadow(0 0 14px #9b7bff);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 3000;
    stroke-dashoffset: -3000;
    animation:
      draw 2s ease forwards,
      neon-flicker 4s ease-in-out infinite;
}

/* ROTATION */
.rotate-cw {
  animation:
    draw 2s ease forwards,
    spin 18s linear infinite,
    magic-glow 6s ease-in-out infinite;
  transform-origin: center;
}

.rotate-ccw {
  animation:
    draw 2s ease forwards,
    spin-rev 18s linear infinite,
    magic-glow 6s ease-in-out infinite;
  transform-origin: center;
}

/* DELAY – từ trong ra ngoài */
.d1 { animation-delay: 0s, 0s; stroke-dashoffset: -3000; }
.d2 { animation-delay: 0.2s, 0.2s; stroke-dashoffset: 3000; }
.d3 { animation-delay: 0.5s, 0.5s; stroke-dashoffset: -3000; }
.d4 { animation-delay: 1s, 1s; stroke-dashoffset: 3000; }
.d5 { animation-delay: 1.5s, 1.5s; stroke-dashoffset: -3000; }
.d6 { animation-delay: 2s, 2s; stroke-dashoffset: -3000; }
.d7 { animation-delay: 2.5s, 2.5s; stroke-dashoffset: 3000; }
.d8 { animation-delay: 3s, 3s; stroke-dashoffset: -3000; }

/* Rune khắc từng ký tự */
.rune {
  fill: none;
  stroke: #d8f3ff;
  stroke-width: 1;
  font-size: 18px;
  letter-spacing: 6px;
}

.rune, text {
  stroke: #8be7ff;
  filter:
    drop-shadow(0 0 6px #6cf3ff)
    drop-shadow(0 0 14px #9b7bff);
}


/* từng ký tự */
.rune-char {
  opacity: 0;
  animation: rune-engrave 0.1s ease forwards;
}

.rune-inner {
  font-size: 26px;   /* tăng cỡ chữ */
  letter-spacing: 10px; /* giãn cho hợp vòng */
  stroke-width: 1.3; /* nét đậm hơn chút */
}

@keyframes rune-engrave {
  from {
    opacity: 0;
    filter: blur(2px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}


/* ANIMATION */
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spin-rev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes magic-glow {
  0%, 100% {
    filter:
      drop-shadow(0 0 3px #6cf3ff)
      drop-shadow(0 0 10px #8be7ff)
      drop-shadow(0 0 18px #9b7bff);
  }
  50% {
    filter:
      drop-shadow(0 0 6px #7a5cff)
      drop-shadow(0 0 18px #9b7bff)
      drop-shadow(0 0 32px #6cf3ff);
  }
}


/* MAGIC DUST */
#magic-dust circle {
  fill: #8be7ff;
  opacity: 0;
  filter:
    drop-shadow(0 0 4px #6cf3ff)
    drop-shadow(0 0 8px #9b7bff);
  animation:
    dust-fade-in 1s ease forwards,
    dust-blink 2.5s ease-in-out infinite;
}

/* bay nhè nhẹ */
@keyframes dust-float {
  0% {
    transform:
      translate(var(--bx), var(--by));
  }
  100% {
    transform:
      translate(
        calc(var(--bx) + var(--fx)),
        calc(var(--by) + var(--fy))
      );
  }
}

/* blink nhẹ */
@keyframes dust-blink {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.4; }
}

@keyframes dust-bloom {
  0% {
    opacity: 0;
    transform:
      translate(0, 0)
      scale(0.3);
    filter: blur(1.5px);
  }

  60% {
    opacity: 1;
    transform:
      translate(
        calc(var(--bx) * 0.6),
        calc(var(--by) * 0.6)
      )
      scale(1.1);
    filter: blur(0.4px);
  }

  100% {
    opacity: 0.9;
    transform:
      translate(var(--bx), var(--by))
      scale(1);
    filter: blur(0);
  }
}

@keyframes dust-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes dust-grow {
  0% {
    opacity: 0;
    transform:
      translate(0, 0)
      scale(0.4);
    filter: blur(2px);
  }

  60% {
    opacity: 0.9;
    filter: blur(0.6px);
  }

  100% {
    opacity: 1;
    transform:
      translate(var(--gx), var(--gy))
      scale(1);
    filter: blur(0);
  }
}